<template>
	<div>
		<el-form
			ref="form"
			status-icon
			:model="formDataModel"
			:label-width="labelWidth"
			v-if="formState !== 'hidden'"
			:class="['form', formState == 'readonly' ? 'readBox' : 'writeBox']">
			<slot>
				<template v-for="item in formList">
					<FromItem
						:FormItem="item"
						@FormItem="val => (item = val)"
						v-model="formData"
						:state="formState"
						:class="[item.block ? 'block' : '']"
						fromType="formItems">
						<template v-for="(value, name) in $slots" #[name]>
							<slot :name="name"></slot>
						</template>
						<template
							v-for="(value, name) in $scopedSlots"
							#[name]="scope">
							<slot
								:name="name"
								:row="scope.row || {}"
								:[`$index`]="scope.$index"></slot>
						</template>
					</FromItem>
				</template>
			</slot>
		</el-form>
	</div>
</template>
<script>
	import FromItem from '@/views/finance/reimburs/formItem/index.vue';
	export default {
		name: 'formItems',
		components: { FromItem },
		props: {
			form: {
				type: Array,
				default: () => [],
			},
			value: {
				type: Object,
				default: () => {},
			},
			model: {
				type: Object,
				default: () => {},
			},
			column: {
				default: 3,
			},
			gap: {
				default: '0 100px',
			},
			labelWidth: {
				default: '80px',
			},

			state: {
				required: false,
			},
			formStatus: {
				required: false,
			},
		},
		data() {
			return {
				blockItemTypes: ['upload', 'textarea'],
			};
		},
		filters: {
			getSelectLabel(T, row, key) {
				let item = row.find(item => {
					return item.value === key;
				});
				return item.label;
			},
		},
		computed: {
			formList: {
				get() {
					// return this.useVModel.call(this, this.form, "changeForm");
					return this.form;
				},
				set(val) {
					this.$emit('changeForm', val);
				},
			},
			formData: {
				get() {
					return this.useVModel.call(this);
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			formDataModel() {
				return this.model ?? this.formData;
			},
			formState: {
				get() {
					if (this.state) {
						return this.state;
					} else {
						return 'write';
					}
				},
			},
		},
		watch: {
			formList: {
				deep: true,
				handler: function (val) {
					let that = this;
					if (val && val.length > 0) {
						val.forEach(item => {
							// if ((!item.type || !item.prop) && !item.format) {
							//     throw new Error("缺少type、prop字段或format字段");
							// }
							if ('rules' in item && !('__rules__' in item)) {
								item.__rules__ = that._.cloneDeep(item.rules);
							}
							if ('__rules__' in item) {
								if (item.status === 'write') {
									item.__rules__ = item.rules;
								} else {
									item.__rules__ = [];
								}
							}
							if (!('status' in item)) {
								that.$set(item, 'status', 'write');
							}
						});
					}
				},
			},
		},
		created() {},
		mounted() {
			this.refRedirect.call(this, 'form');
		},
		methods: {
			getState(item) {
				let state = 'disabled';
				let show = true;
				if (Reflect.has(item, 'show')) {
					if (typeof item.show == 'function') {
						show = item.show();
					} else if (typeof item.show == 'boolean') {
						show = item.show;
					} else {
						show = !!item.show;
					}
				}
				if (show === false) {
					state = 'hidden';
				} else {
					if (typeof item.state == 'function') {
						state = item?.state?.(this.formData);
					} else {
						state = item?.state ?? this.formState;
					}
				}
				return state;
			},
			valid() {
				return new Promise(resolve => {
					this.$refs.form.validate(valid => {
						resolve(valid);
					});
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.form {
		width: 100%;
		padding-top: 10px;
		// padding: 15px 0;
		// display: grid;
		// gap: var(--gap);
		// grid-template-columns: repeat(var(--column), minmax(0, 1fr));
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		gap: 5px 2%;
	}
	// .writeBox {
	//     display: flex;
	//     flex-direction: column;
	//     ::v-deep .el-form-item__label {
	//         text-align: left;
	//         margin-bottom: 8px;
	//     }
	//     ::v-deep .el-form-item__content {
	//         margin-left: 0 !important;
	//     }
	// }

	.readBox {
		::v-deep .el-form-item.block {
			width: 100%;
		}
		::v-deep .el-form-item {
			box-sizing: border-box;
			width: 32%;
			min-width: 300px;
			font-size: 14px;
			display: flex;

			.el-form-item__label {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				// line-height: 22px;
				text-align: left;
				// margin-bottom: 8px;
				padding: 0;
				// width: fit-content !important;
				word-break: break-all;
				white-space: nowrap;
				color: #8c8c8c;
				min-width: 0;
			}
			.el-form-item__content {
				flex: 1;
				font-size: 14px;
				margin-left: 5px !important;
				// line-height: normal;
				height: auto !important;
				font-weight: 500;
				color: #333;
				min-width: 0;
				// line-height: 22px;
			}
		}
		::v-deep .el-form-item:last-child {
			margin-right: auto !important;
		}
	}

	.writeBox {
		::v-deep .el-form-item.block {
			width: 100%;
		}
		::v-deep .el-form-item {
			box-sizing: border-box;
			width: 32%;
			min-width: 200px;
			font-size: 14px;
			display: flex;
			flex-direction: column;
			.el-form-item__label {
				width: 100% !important;
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #464646;
				line-height: 22px;
				text-align: left;
				margin-bottom: 8px;
			}
			.el-form-item__content {
				margin-left: 0 !important;
				// line-height: normal;
				height: auto !important;
				font-weight: 500;
				color: #333;
			}
		}
		::v-deep .el-form-item:last-child {
			margin-right: auto !important;
		}
	}
</style>
